/* =================================================================
   KURT-SERVICE Custom Theme
   Basis:        zvoove
   Erstellt:     24.05.2026
   Quelle:       Designsprache von kurt-service.de übernommen
   
   Farbpalette (aus dem Webseiten-CSS):
   #27303B  Anthrazit-Slate  (Sidebar, Body-Text)
   #F54242  Markenrot        (Akzente, Buttons, Links)
   #5D646C  Sekundär-Grau    (Untertitel)
   #43454E  Border-Grau      (Trennlinien)
   #FAFBFC  Heller Background
   ================================================================= */

/* Schriftart Overpass von Google Fonts laden */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;500;600;700&display=swap');

:root {
    --kurt-rot:          #F54242;
    --kurt-rot-hover:    #D63333;
    --kurt-anthrazit:    #27303B;
    --kurt-anthrazit-2:  #1B232C;
    --kurt-grau-sek:     #5D646C;
    --kurt-grau-border:  #43454E;
    --kurt-bg-hell:      #FAFBFC;
}

/* -----------------------------------------------------------------
   1. GLOBALE SCHRIFTART
   WICHTIG: Material Icons und andere Icon-Fonts NICHT überschreiben!
   ----------------------------------------------------------------- */
body,
.panel,
.card,
input,
select,
textarea,
button,
.btn,
p, div, span, a, label, td, th, li {
    font-family: 'Overpass', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Overpass', sans-serif;
    font-weight: 600;
    color: var(--kurt-anthrazit);
}

/* -----------------------------------------------------------------
   ICON-FONTS SCHÜTZEN
   
   Das Portal nutzt Material Icons (Augensymbol im Passwortfeld,
   Druck-Icon, Stern-Icon usw.) und O_Collection (Menü-Symbole).
   Diese MÜSSEN ihre Icon-Font behalten, sonst wird der Icon-Name
   als Klartext angezeigt (z.B. "visibility" statt 👁).
   ----------------------------------------------------------------- */

/* Material Icons - alle Varianten explizit auf richtige Font */
.material-icons,
i.material-icons,
.btn.material-icons,
button.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.material-icons-outlined { font-family: 'Material Icons Outlined' !important; }
.material-icons-round    { font-family: 'Material Icons Round' !important; }
.material-icons-sharp    { font-family: 'Material Icons Sharp' !important; }
.material-icons-two-tone { font-family: 'Material Icons Two Tone' !important; }

/* FontAwesome */
.fa, .fas, .far, .fab, .fal, .fad,
[class^="fa-"], [class*=" fa-"] {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome' !important;
}

/* Bootstrap Glyphicons */
.glyphicon, [class^="glyphicon-"] {
    font-family: 'Glyphicons Halflings' !important;
}

/* zvoove/LANDWEHR O_Collection (Menü-Icons) */
.ocollection,
[class^="ocoll_"], [class*=" ocoll_"] {
    font-family: 'O_Collection' !important;
}

body {
    color: var(--kurt-anthrazit);
    background-color: var(--kurt-bg-hell);
}

/* -----------------------------------------------------------------
   2. LOGO IN DER SIDEBAR
   Logo wird aus dem Portal-Dateisystem geladen
   Pfad verifiziert: ../custom/bilder/kurt_logo.png
   ----------------------------------------------------------------- */

/* Logo wenn Menü aufgeklappt (Standard) */
#menue_links:before,
#menue_links.menu_open:before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100px !important;
    background-color: #fff !important;
    background-image: url(../custom/bilder/kurt_logo.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 75% auto !important;
    background-origin: content-box !important;
    padding: 20px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    z-index: 1;
}

/* Wenn Sidebar eingeklappt ist (schmal) - Logo schmaler darstellen */
body.menupinned_not #menue_links:before {
    height: 60px !important;
    background-size: 80% auto !important;
    padding: 10px 5px !important;
}

/* Sidebar Padding-Top anpassen (Platz für Logo) */
#menue_links {
    padding-top: 120px !important;
}

/* -----------------------------------------------------------------
   3. SIDEBAR (Anthrazit wie die Webseite)
   ----------------------------------------------------------------- */
#menue_links {
    background: linear-gradient(
        180deg,
        var(--kurt-anthrazit) 0%,
        var(--kurt-anthrazit-2) 100%
    ) !important;
    border-right: 1px solid var(--kurt-grau-border);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
}

/* -----------------------------------------------------------------
   4. MENÜ-EINTRÄGE
   ----------------------------------------------------------------- */
#menue_links .menue_block_kopf {
    color: #fff !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

#menue_links .menue_block_kopf:hover {
    color: var(--kurt-rot) !important;
}

#menue_links ul li a {
    color: #d0d4d8 !important;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

#menue_links ul li a:hover {
    color: var(--kurt-rot) !important;
    background-color: rgba(245, 66, 66, 0.08);
    padding-left: 20px;
}

#menue_links ul li.aktiv > a,
#menue_links ul li.active > a {
    color: var(--kurt-rot) !important;
    font-weight: 600;
    border-left: 3px solid var(--kurt-rot);
}

/* -----------------------------------------------------------------
   5. PRIMARY BUTTONS
   ----------------------------------------------------------------- */
.btn-primary,
#mobile-nav {
    background-color: var(--kurt-rot) !important;
    border-color: var(--kurt-rot) !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 10px 20px;
}

.btn-primary:hover,
#mobile-nav:hover,
.btn-primary:focus,
#mobile-nav:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--kurt-rot-hover) !important;
    border-color: var(--kurt-rot-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 66, 66, 0.25);
}

.btn-primary:focus,
#mobile-nav:focus {
    box-shadow: 0 0 0 0.2rem rgba(245, 66, 66, 0.3) !important;
}

/* Sekundäre Buttons (heller, mit Anthrazit-Border) */
.btn-default,
.btn-secondary {
    background-color: #fff !important;
    border-color: var(--kurt-grau-border) !important;
    color: var(--kurt-anthrazit) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background-color: var(--kurt-bg-hell) !important;
    border-color: var(--kurt-anthrazit) !important;
}

/* -----------------------------------------------------------------
   6. LINKS UND BROTKRUMEN
   ----------------------------------------------------------------- */
a {
    color: var(--kurt-rot);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--kurt-rot-hover);
    text-decoration: underline;
}

.breadcrumb a {
    color: var(--kurt-rot);
}

.breadcrumb {
    color: var(--kurt-grau-sek);
    background-color: transparent;
    padding: 0;
}

/* -----------------------------------------------------------------
   7. CARDS / PANELS (heller mit feinen Schatten wie Webseite)
   ----------------------------------------------------------------- */
.panel,
.card {
    background-color: #fff !important;
    border: 1px solid #e8eaed !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(39, 48, 59, 0.05) !important;
}

.panel:hover,
.card:hover {
    box-shadow: 0 4px 20px rgba(39, 48, 59, 0.08) !important;
}

.panel-heading,
.card-header {
    background-color: var(--kurt-bg-hell) !important;
    border-bottom: 1px solid #e8eaed !important;
    font-weight: 600;
    color: var(--kurt-anthrazit);
}

/* -----------------------------------------------------------------
   8. FORMULAR-FELDER
   ----------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea,
.form-control {
    border: 1px solid #d8dadd !important;
    border-radius: 4px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--kurt-rot) !important;
    box-shadow: 0 0 0 3px rgba(245, 66, 66, 0.12) !important;
    outline: none;
}

/* -----------------------------------------------------------------
   9. ÜBERNOMMENE ANPASSUNGEN AUS ALTEM KURT-CSS
   ----------------------------------------------------------------- */
.btn-success {
    display: none;
}

.col-md-6 {
    width: 100%;
}

.bedienerverify #ctl0_PortalLayoutContent_Main_ctl4 {
    font-size: 0;
}

.bedienerverify #ctl0_PortalLayoutContent_Main_ctl4:after {
    content: 'Bestätigungscode neu erzeugen';
    font-size: 14px;
}

/* -----------------------------------------------------------------
   10. TABELLEN
   ----------------------------------------------------------------- */
.table thead th {
    background-color: var(--kurt-bg-hell);
    color: var(--kurt-anthrazit);
    font-weight: 600;
    border-bottom: 2px solid var(--kurt-anthrazit);
}

.table-hover tbody tr:hover {
    background-color: rgba(245, 66, 66, 0.04);
}

/* -----------------------------------------------------------------
   11. KLEINE MODERNE TOUCHES
   ----------------------------------------------------------------- */
button,
.btn,
input[type="submit"],
input[type="button"] {
    transition: all 0.2s ease;
}

/* Scrollbars schöner machen (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--kurt-bg-hell);
}

::-webkit-scrollbar-thumb {
    background: #c8ccd0;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kurt-grau-sek);
}

/* -----------------------------------------------------------------
   BREADCRUMB - Pfadleiste oben
   Basis-Theme setzt 10px (sehr klein), wir erhöhen auf 13px
   ----------------------------------------------------------------- */
.statuszeile .breadcrumb {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.statuszeile .breadcrumb a {
    color: var(--kurt-rot);
    text-decoration: none;
}

.statuszeile .breadcrumb a:hover {
    color: var(--kurt-rot-hover);
    text-decoration: underline;
}

/* =================================================================
   FOOTER - Cookie-Einstellungen-Link in Kurt-Rot
   
   Hinweis: Der Footer-Text selbst wird in zvoove
   Connect unter "Verwaltung > Texte & Vorlagen > WEBSITE_Footer"
   gepflegt - nicht mehr per CSS versteckt.
   ================================================================= */
.footer.portlet #changeConsent {
    color: var(--kurt-rot) !important;
}

.footer.portlet #changeConsent:hover {
    color: var(--kurt-rot-hover) !important;
    text-decoration: underline;
}

/* =================================================================
   PFLICHTFELDER-HINWEIS AUSBLENDEN
   
   Das <span> mit Klasse "input_required_hint" zeigt einen
   "Pflichtfelder"-Kasten an, meist links unten neben dem Formular.
   
   Original-HTML:
   <span class="input_required input_required_hint" 
         style="display:block;float:right;..."> Pflichtfelder </span>
   
   Hinweis: Die Klasse "input_required" wird auch von ECHTEN
   Pflichtfeldern (Inputs) verwendet - diese sollen ihren roten
   Rahmen behalten. Daher gezielt nur "input_required_hint" treffen.
   ================================================================= */
.input_required_hint {
    display: none !important;
}





/* ===================================================================
   KURT-SERVICE 2026  -  Phase 2: Menue- und Begriffsanpassungen
   Hinzugefuegt: 26.05.2026. Rein optisch, umkehrbar durch Entfernen
   dieses Blocks. Jede Regel wurde live im Portal getestet.
   =================================================================== */

/* 1) Brotkruemelpfad ausblenden */
.breadcrumb { display: none !important; }

/* 2) Personaler-Menue: verstaendlichere Begriffe */
#menue_links.menu_open a[href*="page=Personal.SVMeldungen"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Personal.SVMeldungen"]::after { content: "Sozialversicherung" !important; font-size: 14px; line-height: 21px; }
#menue_links.menu_open a[href*="page=Personal.Elstam"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Personal.Elstam"]::after { content: "Lohnsteuer-Merkmale" !important; font-size: 14px; line-height: 21px; }
#menue_links.menu_open a[href*="page=Personal.A1Antraege"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Personal.A1Antraege"]::after { content: "A1-Bescheinigungen" !important; font-size: 14px; line-height: 21px; }
#menue_links.menu_open a[href*="page=Personal.Downloads"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Personal.Downloads"]::after { content: "Bereitgestellte Dokumente" !important; font-size: 14px; line-height: 21px; }
#menue_links.menu_open a[href*="page=Personal.Uploads"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Personal.Uploads"]::after { content: "Unterlagen einreichen" !important; font-size: 14px; line-height: 21px; }
#menue_links.menu_open a[href*="page=Einstellungen.Account"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Einstellungen.Account"]::after { content: "Mein Konto" !important; font-size: 14px; line-height: 21px; }
#menue_links.menu_open a[href*="page=Logout"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="page=Logout"]::after { content: "Abmelden" !important; font-size: 14px; line-height: 21px; }

/* 3) Login-Seite: "Bediener" -> "Sachbearbeiter" */
#menue_links.menu_open a[href*="login=Sachbearbeiter"] { font-size: 0 !important; }
#menue_links.menu_open a[href*="login=Sachbearbeiter"]::after { content: "Sachbearbeiter" !important; font-size: 14px; line-height: 21px; }

/* 4) Login-Box-Titel -> "Anmeldung" */
.login-panel .panel-title { font-size: 0 !important; }
.login-panel .panel-title::after { content: "Anmeldung" !important; font-size: 15px; line-height: 18px; font-weight: 600; }

/* 5) Ueberfluessiges ausblenden */
#menue_links a[href*="page=Index"] { display: none !important; }
body.login #menue_links .menue_block_kopf.sonstiges { display: none !important; }

/* 6) Umschalter Minimieren/Maximieren - zustandsabhaengig */
#menue_links.menu_open a.minimieren { font-size: 0 !important; min-height: 41px; }
#menue_links a.minimieren::before { font-size: 20px !important; }
#menue_links.menu_open a.minimieren::after { position: absolute !important; left: 80px !important; top: 10px !important; font-size: 14px !important; font-family: "Overpass", -apple-system, sans-serif !important; font-weight: 500 !important; line-height: 21px !important; color: inherit !important; white-space: nowrap; }
body:not(.menupinned_not) #menue_links.menu_open a.minimieren::after { content: "Menü einklappen" !important; }
body.menupinned_not #menue_links.menu_open a.minimieren::after { content: "Menü ausklappen" !important; }

/* 7) Menue-Icons beim Hover in Markenrot */
#menue_links .menue_block_kopf:hover::before,
#menue_links .menue_block_kopf:hover::after { color: #f54242 !important; }

/* 8) Hover-Sprung der Menuepunkte stoppen */
#menue_links ul li a:hover { padding-left: 80px !important; }
/* --- 9) Seitenueberschriften an die Menuepunkte angleichen -------- */
body.personal_svmeldungen .titelCaption { font-size: 0 !important; }
body.personal_svmeldungen .titelCaption::after { content: "Sozialversicherung" !important; font-size: 36px; font-weight: 500; }
body.personal_elstam .titelCaption { font-size: 0 !important; }
body.personal_elstam .titelCaption::after { content: "Lohnsteuer-Merkmale" !important; font-size: 36px; font-weight: 500; }
body.personal_a1antraege .titelCaption { font-size: 0 !important; }
body.personal_a1antraege .titelCaption::after { content: "A1-Bescheinigungen" !important; font-size: 36px; font-weight: 500; }
body.personal_downloads .titelCaption { font-size: 0 !important; }
body.personal_downloads .titelCaption::after { content: "Bereitgestellte Dokumente" !important; font-size: 36px; font-weight: 500; }
body.personal_uploads .titelCaption { font-size: 0 !important; }
body.personal_uploads .titelCaption::after { content: "Unterlagen einreichen" !important; font-size: 36px; font-weight: 500; }
body.einstellungen_account .titelCaption { font-size: 0 !important; }
body.einstellungen_account .titelCaption::after { content: "Mein Konto" !important; font-size: 36px; font-weight: 500; }

/* --- 10) Login-Seite: Reihenfolge "Personal" vor "Sachbearbeiter" - */
#menue li.has_sub > ul:has(a[href*="login=Sachbearbeiter"]) { display: flex !important; flex-direction: column !important; }
#menue li:has(> a[href*="login=Personal"]) { order: 0 !important; }
#menue li:has(> a[href*="login=Sachbearbeiter"]) { order: 1 !important; }

/* --- 11) "Anmelden"-Button: Hover-Schrift sichtbar machen --------- */
#ctl0_PortalLayoutContent_Main_LoginButton:hover,
#ctl0_PortalLayoutContent_Main_LoginButton:hover * { color: #f54242 !important; }



/* --- 12) Vor-Login: einheitliche Gestaltung ----------------------- */
/*  Gilt fuer Login-Seiten (body.login) und Passwort-vergessen-Seiten
    (body.bediener_bedienerverify). Box mittig, dunkler Anthrazit-
    Kopf, Footer kompakt direkt unter der Box, nahtloses Weiss auf
    voller Hoehe, "Sonstiges" und separate Ueberschrift ausgeblendet. */

body.login, body.bediener_bedienerverify { background-color: #ffffff !important; min-height: 100vh !important; }

body.login #hauptbereichbody,
body.bediener_bedienerverify #hauptbereichbody { min-height: 0 !important; border: none !important; box-shadow: none !important; }

body.login #hauptbereichbody > .panel-heading,
body.bediener_bedienerverify #hauptbereichbody > .panel-heading { display: none !important; }

body.login #hauptbereichbody > .panel-body,
body.bediener_bedienerverify #hauptbereichbody > .panel-body {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    padding-top: 69px !important; box-shadow: none !important; border: none !important;
}

body.login #hauptbereichbody div.login,
body.bediener_bedienerverify #hauptbereichbody div.bedienerverify {
    width: 280px !important;
    max-width: calc(100% - 24px) !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

body.login .login-panel,
body.bediener_bedienerverify .recover-panel {
    width: 100% !important;
    max-width: none !important;
}

body.login .passwort_vergessen { font-size: 0 !important; }
body.login .passwort_vergessen a { font-size: 14px !important; line-height: 1.4 !important; }

body.login .titelCaption,
body.bediener_bedienerverify .titelCaption { display: none !important; }

body.login .login-panel .panel-heading { background-color: #27303B !important; }
body.login .login-panel .panel-title::after { color: #ffffff !important; }
body.login .login-panel .panel-title::after { content: "Anmeldung Personal" !important; }
body.login:has(form[action*="login=Sachbearbeiter"]) .login-panel .panel-title::after { content: "Anmeldung Sachbearbeiter" !important; }

body.bediener_bedienerverify .recover-panel .panel-heading { background-color: #27303B !important; }
body.bediener_bedienerverify .recover-panel .panel-title { color: #ffffff !important; }

body.login #menue_links .menue_block_kopf.sonstiges,
body.bediener_bedienerverify #menue_links .menue_block_kopf.sonstiges { display: none !important; }

body.login #ctl0_PortalLayoutContent_bottommenu,
body.bediener_bedienerverify #ctl0_PortalLayoutContent_bottommenu {
    text-align: center !important; padding-left: 101px !important;
    box-sizing: border-box !important; margin-top: 20px !important;
}
body.login #changeConsent,
body.bediener_bedienerverify #changeConsent { display: block !important; margin-top: 2px !important; font-size: 0 !important; }
body.login #changeConsent::after,
body.bediener_bedienerverify #changeConsent::after { content: "Cookie-Einstellungen ändern" !important; font-size: 12px !important; }



/* --- 13) Mobile (≤ 767.98px): Vor-Login auf Smartphone und Tablet --- */
/*  Greift jetzt bis 767.98px (statt 575.98). Damit ist der zvoove-tote
    Bereich Tablet-hochkant / schmale Browser (576-767) abgedeckt:
    kein dunkler Streifen unter Logo mehr. Sidebar wird zum reinen
    Logo-Streifen, Menü-Inhalt verborgen. Login-Box behält die 280px
    aus Teil 12. Footer fest unten verankert. Switcher zwischen
    Personal- und Sachbearbeiter-Login als Textlink direkt unter der
    Login-Box. Passwort-vergessen-Link unter dem Eingabefeld, links-
    bündig zu den Labels.                                                 */
@media (max-width: 767.98px) {
  body.login #menue_links,
  body.bediener_bedienerverify #menue_links {
    height: 100px !important; min-height: 100px !important;
    padding-top: 0 !important; overflow: visible !important;
  }
  body.login #menue_links .panel-body,
  body.bediener_bedienerverify #menue_links .panel-body {
    display: block !important; height: 0 !important; overflow: visible !important;
  }
  body.login #menue_links .menue_block_kopf,
  body.bediener_bedienerverify #menue_links .menue_block_kopf,
  body.login #menue_links a.minimieren { display: none !important; }
  body.login #menue_links ul li,
  body.bediener_bedienerverify #menue_links ul li { display: none !important; }

  /* Footer fest am unteren Bildrand */
  body.login #ctl0_PortalLayoutContent_bottommenu,
  body.bediener_bedienerverify #ctl0_PortalLayoutContent_bottommenu {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: #ffffff !important; padding: 10px 0 !important; margin: 0 !important; padding-left: 0 !important;
  }

  /* Default-Switcher zum Sachbearbeiter-Login (Personal ist Default) */
  body.login #menue_links li:has(a[href*="login=Sachbearbeiter"]),
  body.login:has(form[action*="login=Personal"]) #menue_links li:has(a[href*="login=Sachbearbeiter"]) {
    display: block !important; position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: auto !important;
    text-align: center !important; background: transparent !important; z-index: 100 !important;
  }
  /* Override auf Sachbearbeiter-Seite: stattdessen Personal-Switcher */
  body.login:has(form[action*="login=Sachbearbeiter"]) #menue_links li:has(a[href*="login=Sachbearbeiter"]) { display: none !important; }
  body.login:has(form[action*="login=Sachbearbeiter"]) #menue_links li:has(a[href*="login=Personal"]) {
    display: block !important; position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: auto !important;
    text-align: center !important; background: transparent !important; z-index: 100 !important;
  }

  /* Switcher-Link-Styling */
  body.login #menue_links li a[href*="login="],
  body.bediener_bedienerverify #menue_links li a[href*="login="] {
    background: transparent !important; color: #27303B !important;
    padding: 0 !important; text-decoration: underline !important;
    display: inline !important; width: auto !important; line-height: 1.4 !important;
  }

  /* Switcher-Text-Override per ::after */
  body.login #menue_links a[href*="login=Sachbearbeiter"] { font-size: 0 !important; }
  body.login #menue_links a[href*="login=Sachbearbeiter"]::after { content: "Zur Sachbearbeiter-Anmeldung" !important; font-size: 14px !important; }
  body.login:has(form[action*="login=Sachbearbeiter"]) #menue_links a[href*="login=Personal"] { font-size: 0 !important; }
  body.login:has(form[action*="login=Sachbearbeiter"]) #menue_links a[href*="login=Personal"]::after { content: "Zur Personal-Anmeldung" !important; font-size: 14px !important; }

  /* Hauptbereich-Padding angepasst, mehr Platz für Switcher + Footer */
  body.login #hauptbereichbody > .panel-body,
  body.bediener_bedienerverify #hauptbereichbody > .panel-body {
    padding-top: 24px !important; padding-bottom: 100px !important;
  }

  /* Passwort-vergessen-Link unter Passwort-Eingabefeld, linksbündig */
  .passwort { position: relative !important; }
  .passwort .passwort_vergessen {
    position: absolute !important; left: 0 !important; right: auto !important;
    top: 100% !important; margin-top: 4px !important;
    float: none !important; padding-right: 0 !important;
  }
}



/* --- 14) Recover-Seite + Schule C: Konsistente Button-Breite ---- */
/*  Schule C: Buttons gleichbreit wie Inputs (visuelle Ruhe, vertikaler
    Rhythmus). Gilt für Anmelden- und Absenden-Buttons gleichermaßen,
    Desktop UND Mobile.

    Captcha-Link "Bestätigungscode neu erzeugen" ohne Klammern und ohne
    Doppeltext, linksbündig in Markenrot. Captcha-Bild margin-bottom
    20px für Worst-Case-Descender (Q, j, y, p).

    Zum-Login-Button auf Desktop versteckt (Sidebar reicht als Rückweg),
    auf Mobile als dezenter Textlink unter Absenden.

    Bei sehr schmal (≤360px) Captcha-Link in 10px nowrap.                 */

/* Captcha-Link aufräumen */
body.bediener_bedienerverify .captcha_regenerate {
  font-size: 0 !important;
  float: none !important;
  display: block !important;
  text-align: left !important;
  padding-top: 4px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
body.bediener_bedienerverify .captcha_regenerate a {
  font-size: 0 !important;
  max-width: 100% !important;
  display: inline-block !important;
}
body.bediener_bedienerverify .captcha_regenerate a::after {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
body.bediener_bedienerverify .form-group.captcha img {
  margin-bottom: 20px !important;
}

/* Schule C Recover: Absenden-Button auf Input-Breite */
body.bediener_bedienerverify .recover-panel .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.bediener_bedienerverify .recover-panel .row .col-md-6:has(button.btn-primary) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Schule C Login: Anmelden-Button auf Input-Breite */
body.login .login-panel .row.login-buttons {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 17.5px !important;
}
body.login .login-panel .row.login-buttons > [class*="col-"] {
  padding-left: 17.5px !important;
  padding-right: 17.5px !important;
}

@media (max-width: 767.98px) {
  /* Zum-Login als Textlink unter Absenden auf Mobile */
  body.bediener_bedienerverify .recover-panel a.btn-success {
    display: inline-block !important;
    background: transparent !important;
    color: #27303B !important;
    border: none !important;
    text-decoration: underline !important;
    font-weight: normal !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
    width: auto !important;
    box-shadow: none !important;
  }
  body.bediener_bedienerverify .recover-panel .row .col-md-6:has(a.btn-success) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    margin-top: 8px !important;
  }
  body.bediener_bedienerverify .recover-panel a.btn-success:hover {
    background: transparent !important;
    color: #f54242 !important;
  }
}

@media (max-width: 360px) {
  body.bediener_bedienerverify .captcha_regenerate a::after {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}



/* --- 16) Phase 6: Validierung, Fehlermeldungen, Modal-Theme ---- */
/*  Login- und Recover-Fehlermeldungen ans Theme angepasst. Konsistente
    Box-Pattern: 1px Border + 10% farbiger Hintergrund (Markenrot=Fehler,
    Info-Blau=Hinweis). Modal-Dialog auf Recover Theme-konform, vertikal
    mittig, ohne redundantes X, Button in Schule C mit Hover-Markenrot.

    WICHTIG: Texte unterscheiden zwischen Personal und Sachbearbeiter:
    - Personal: Feld "Personalnummer", Reset = neues Passwort
    - Sachbearbeiter: Feld "Bedienerkürzel", Reset = E-Mail mit Link.

    Bei aktiver Fehlermeldung: Pflichtfeld-Inputs markenrot umrandet,
    Mobile-Switcher rutscht tiefer.                                     */

/* === Drucken/PDF-Buttons im Title-Portlet ausblenden auf Vor-Login = */
body.login .titelButtons,
body.bediener_bedienerverify .titelButtons,
body.login [id*="TitlePortlet"][id*="titelbuttons"],
body.bediener_bedienerverify [id*="TitlePortlet"][id*="titelbuttons"] {
  display: none !important;
}

/* === Login-Fehler-Box (Personalnummer/Passwort oder Bediener) === */
body.login .alert-danger {
  background-color: rgba(245, 66, 66, 0.10) !important;
  border: 1px solid #f54242 !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  max-width: 280px !important;
  box-shadow: 0 1px 3px rgba(245, 66, 66, 0.12) !important;
}
body.login .alert-danger > p,
body.login .alert-danger > ul,
body.login .alert-danger > ul > li {
  font-size: 0 !important;
  margin: 0 !important; padding: 0 !important;
  list-style: none !important;
  height: 0 !important; overflow: hidden !important;
}
/* Default: Personal */
body.login .alert-danger::after {
  content: "Anmeldedaten konnten nicht bestätigt werden. Bitte überprüfen Sie Ihre Personalnummer oder Ihr Passwort." !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #27303B !important;
  display: block !important;
  line-height: 1.5 !important;
  text-wrap: balance !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}
/* Override: Sachbearbeiter ("Bedienerkürzel" statt "Personalnummer") */
body.login:has(form[action*="login=Sachbearbeiter"]) .alert-danger::after {
  content: "Anmeldedaten konnten nicht bestätigt werden. Bitte überprüfen Sie Ihr Bedienerkürzel oder Ihr Passwort." !important;
}

@media (max-width: 767.98px) and (max-height: 600px) {
  html body.login:has(.alert-danger) #menue_links li:has(a[href*="login=Sachbearbeiter"]),
  html body.login:has(.alert-danger) #menue_links li:has(a[href*="login=Personal"]) { display: none !important; }
  html body.login:has(.alert-danger) #ctl0_PortalLayoutContent_bottommenu { display: none !important; }
}

/* === Recover-Seite: Pflichtfeld-Fehler-Box ================== */
body.bediener_bedienerverify .alert-danger {
  background-color: rgba(245, 66, 66, 0.10) !important;
  border: 1px solid #f54242 !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  max-width: 280px !important;
  box-shadow: 0 1px 3px rgba(245, 66, 66, 0.12) !important;
}
body.bediener_bedienerverify .alert-danger > p,
body.bediener_bedienerverify .alert-danger > ul,
body.bediener_bedienerverify .alert-danger > ul > li {
  font-size: 0 !important;
  margin: 0 !important; padding: 0 !important;
  list-style: none !important;
  height: 0 !important; overflow: hidden !important;
}
body.bediener_bedienerverify .alert-danger::after {
  content: "Bitte markierte Felder ausfüllen." !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #27303B !important;
  display: block !important;
  line-height: 1.5 !important;
  text-wrap: balance !important;
}

/* Rote X verstecken */
body.bediener_bedienerverify img.validator_error,
body.bediener_bedienerverify .validator_error img { display: none !important; }

/* Pflichtfelder markenrot umranden wenn Fehler aktiv */
body.bediener_bedienerverify:has(.alert-danger) input.input_required {
  border: 1px solid #f54242 !important;
  background-color: rgba(245, 66, 66, 0.04) !important;
}

/* === Recover-Info-Box (Hinweis-Box) ========================= */
body.bediener_bedienerverify .alert-info {
  font-size: 0 !important;
  background-color: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid #2563EB !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  max-width: 280px !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12) !important;
}
/* Default: Personal (E-Mail mit Link zum Zurücksetzen) */
body.bediener_bedienerverify .alert-info::after {
  content: "Geben Sie Personalnummer und hinterlegte E-Mail-Adresse ein. Sie erhalten eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts. Falls keine E-Mail hinterlegt ist, wenden Sie sich an die Personalabteilung." !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #27303B !important;
  display: block !important;
  text-wrap: balance !important;
}
/* Override: Sachbearbeiter (E-Mail mit Link zum Zurücksetzen) */
body.bediener_bedienerverify:has(form[action*="type=Sachbearbeiter"]) .alert-info::after {
  content: "Geben Sie Bedienerkürzel und hinterlegte E-Mail-Adresse ein. Sie erhalten umgehend eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts. Falls keine E-Mail hinterlegt ist, wenden Sie sich an die Personalabteilung." !important;
}

/* === Recover: Absenden-Button (Schule C, alle States explizit) === */
body.bediener_bedienerverify .recover-panel button.btn-primary,
body.bediener_bedienerverify .recover-panel button.btn-primary:hover,
body.bediener_bedienerverify .recover-panel button.btn-primary:focus,
body.bediener_bedienerverify .recover-panel button.btn-primary:active,
body.bediener_bedienerverify .recover-panel button.btn-primary:not(:disabled):not(.disabled):active {
  background: #ffffff !important;
  color: #27303B !important;
  border: 1px solid #43454E !important;
  box-shadow: none !important;
}
body.bediener_bedienerverify .recover-panel button.btn-primary:hover,
body.bediener_bedienerverify .recover-panel button.btn-primary:focus,
body.bediener_bedienerverify .recover-panel button.btn-primary:active {
  color: #f54242 !important;
  border-color: #f54242 !important;
}

/* === Recover-Modal-Dialog ================================== */
body.bediener_bedienerverify #ctl0_PortalLayoutContent_Main_InfoDialog.modal.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(39, 48, 59, 0.5) !important;
}
body.bediener_bedienerverify #ctl0_PortalLayoutContent_Main_InfoDialog .modal-dialog {
  max-width: 320px !important;
  margin: 0 auto !important;
}
body.bediener_bedienerverify .modal-content {
  background: #ffffff !important;
  border: 1px solid #d8dce0 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}
body.bediener_bedienerverify .modal-header {
  background: #27303B !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  border-bottom: none !important;
  justify-content: flex-start !important;
}
body.bediener_bedienerverify .modal-title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}
/* X-Close ausgeblendet (redundant zur Primary-Action) */
body.bediener_bedienerverify .modal-header .close,
body.bediener_bedienerverify .modal-header button.close { display: none !important; }

body.bediener_bedienerverify .modal-body { padding: 18px !important; }
body.bediener_bedienerverify .modal-body .alert-danger {
  background-color: rgba(245, 66, 66, 0.10) !important;
  border: 1px solid #f54242 !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-shadow: none !important;
}
body.bediener_bedienerverify .modal-body .alert-danger > * {
  font-size: 0 !important; margin: 0 !important; padding: 0 !important;
}
/* Default: Personal (neues Passwort) */
body.bediener_bedienerverify .modal-body .alert-danger::after {
  content: "Es konnte kein neues Passwort versendet werden. Bitte prüfen Sie Personalnummer und hinterlegte E-Mail-Adresse." !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #27303B !important;
  display: block !important;
  text-wrap: balance !important;
  line-height: 1.5 !important;
}
/* Override: Sachbearbeiter (E-Mail mit Link) */
body.bediener_bedienerverify:has(form[action*="type=Sachbearbeiter"]) .modal-body .alert-danger::after {
  content: "Es konnte keine E-Mail versendet werden. Bitte prüfen Sie Bedienerkürzel und hinterlegte E-Mail-Adresse." !important;
}

body.bediener_bedienerverify .modal-footer {
  padding: 12px 18px 18px !important;
  border-top: 1px solid #d8dce0 !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}
body.bediener_bedienerverify .modal-footer button.btn-primary {
  width: 100% !important;
  max-width: 244px !important;
  height: 47px !important;
  background: #ffffff !important;
  border: 1px solid #43454E !important;
  color: #27303B !important;
  padding: 0 !important;
  font-size: 0 !important;
  border-radius: 3px !important;
  line-height: 47px !important;
  text-align: center !important;
  box-shadow: none !important;
}
body.bediener_bedienerverify .modal-footer button.btn-primary::after {
  content: "Erneut versuchen" !important;
  font-size: 17.5px !important;
  font-weight: 400 !important;
  color: #27303B !important;
  display: inline !important;
}
body.bediener_bedienerverify .modal-footer button.btn-primary:hover,
body.bediener_bedienerverify .modal-footer button.btn-primary:focus,
body.bediener_bedienerverify .modal-footer button.btn-primary:active {
  background: #ffffff !important;
  border-color: #f54242 !important;
  color: #f54242 !important;
}
body.bediener_bedienerverify .modal-footer button.btn-primary:hover::after,
body.bediener_bedienerverify .modal-footer button.btn-primary:focus::after,
body.bediener_bedienerverify .modal-footer button.btn-primary:active::after {
  color: #f54242 !important;
}


/* ___ Teil 17 - Phase 7a (Erfolgs-Modal + Selektor-Schaerfung) _________ */

/* 17.1 — Doppelten Hilfetext im Modal-Body unterdruecken (Fix Teil 16) */
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info::before,
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info::after,
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-danger::before,
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-danger::after {
  content: none !important;
}

/* 17.2 — Modal vertikal zentrieren */
#ctl0_PortalLayoutContent_Main_InfoDialog.modal.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-dialog {
  margin: 0 auto !important;
  max-width: 480px !important;
  width: 100% !important;
}

/* 17.3 — Erfolgsmeldung: Original-Text unterdruecken, neuen Text via ::before */
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info {
  font-size: 0 !important;
  line-height: 0 !important;
  background: rgba(22, 163, 74, 0.08) !important;
  border: 1px solid #16A34A !important;
  border-left: 4px solid #16A34A !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info::before {
  content: "Wir haben Ihnen ein neues Passwort an Ihre hinterlegte E-Mail-Adresse geschickt. Bitte pruefen Sie Ihren Posteingang und ggf. den Spam-Ordner." !important;
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #27303B !important;
  font-weight: 400 !important;
}

/* 17.4 — Sachbearbeiter-Override (Link statt Passwort) */
body:has(form[action*="Sachbearbeiter"]) #ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info::before {
  content: "Wir haben Ihnen eine E-Mail mit einem Link zum Zuruecksetzen Ihres Passworts geschickt. Bitte pruefen Sie Ihren Posteingang und ggf. den Spam-Ordner." !important;
}

/* 17.5 — Modal-Header bei Erfolg gruen akzentuieren (Don Norman Color Code) */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-header {
  border-bottom: 4px solid #16A34A !important;
}

/* 17.6 — Modal-Title bei Erfolg austauschen */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-title {
  font-size: 0 !important;
  line-height: 0 !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-title::after {
  content: "E-Mail wurde versandt" !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* 17.7 — "Zum Login"-Button im Erfolgs-Modal sichtbar machen + Style */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_RegistrationButton {
  display: inline-block !important;
  width: 244px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  background: #27303B !important;
  border: 1px solid #27303B !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  text-align: center !important;
  min-height: 44px !important;
  line-height: 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_RegistrationButton:hover,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_RegistrationButton:focus,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_RegistrationButton:active {
  background: #ffffff !important;
  color: #27303B !important;
  border-color: #27303B !important;
}

/* 17.8 — Modal-Footer Layout bei Erfolg */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-footer {
  padding: 16px !important;
  border-top: 1px solid #e8ecef !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
}

/* 17.9 — Mobile-Optimierung (<=767.98px) */
@media (max-width: 767.98px) {
  #ctl0_PortalLayoutContent_Main_InfoDialog .modal-dialog {
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }
  #ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_RegistrationButton {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
  }
  #ctl0_PortalLayoutContent_Main_InfoDialog .modal-body {
    padding: 16px !important;
  }
  #ctl0_PortalLayoutContent_Main_InfoDialog .modal-header {
    padding: 12px 16px !important;
  }
}

/* 17.10 — Extra-Schutz: andere modal-body Kinder versteckt halten (Doppeltext) */
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body > *:not(.alert) {
  display: none !important;
}

/* ___ Ende Teil 17 ____________________________________________________ */



/* ___ Teil 18 - Phase 7a Korrektur (Faktencheck + Box-Pattern) ____________ */
/* Korrekturen ggue. Teil 17:
   1. Reset-Mail enthaelt LINK (24h gueltig), kein neues Passwort.
      Texte fuer Personal + Sachbearbeiter identisch.
   2. Box-Pattern wieder konform: 1px solid all sides, KEIN 4px Border-Left.
   3. Inner-Knoten der alert-info komplett unterdruecken.
   4. Korrekte Modal-Footer-Button-ID InfoDialogGotoLoginPage.
   5. Umlaute korrekt (ue/ae aus Teil 17 ersetzt durch echte ue/ae). */

#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info {
  font-size: 0 !important;
  line-height: 0 !important;
  background: rgba(22, 163, 74, 0.08) !important;
  border: 1px solid #16A34A !important;
  border-left: 1px solid #16A34A !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
}

#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info * {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info::before {
  content: "Wir haben Ihnen eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts geschickt. Bitte prüfen Sie Ihren Posteingang und ggf. den Spam-Ordner. Der Link ist 24 Stunden gültig." !important;
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #27303B !important;
  font-weight: 400 !important;
}

body:has(form[action*="Sachbearbeiter"]) #ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-info::before {
  content: "Wir haben Ihnen eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts geschickt. Bitte prüfen Sie Ihren Posteingang und ggf. den Spam-Ordner. Der Link ist 24 Stunden gültig." !important;
}

#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-title,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-title * {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-title::after {
  content: "E-Mail wurde versandt" !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage {
  display: inline-block !important;
  width: 244px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  background: #27303B !important;
  border: 1px solid #27303B !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  text-align: center !important;
  min-height: 44px !important;
  line-height: 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage:hover,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage:focus,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage:active {
  background: #ffffff !important;
  color: #27303B !important;
  border-color: #27303B !important;
  text-decoration: none !important;
}

@media (max-width: 767.98px) {
  #ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
  }
}

/* ___ Ende Teil 18 _________________________________________________________ */


/* ___ Teil 19 - Phase 7a Button-Konsistenz + Footer-Trenner ___________ */
/* Fix Teil 18:
   - "Zum Login"-Button war filled anthrazit -> bricht Button-Konsistenz.
   - Neu: Outline-Style wie Anmelden/Absenden (weiss + grey border + anthrazit text)
   - Hover/Focus/Active: Markenrot-Akzent (wie alle anderen Buttons im Theme)
   - Modal-Footer mit 1px solid #e8ecef border-top (Body/Footer-Separator). */

#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage {
  background: #ffffff !important;
  color: #27303B !important;
  border: 1px solid #43454E !important;
  text-decoration: none !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage:hover,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage:focus,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) #ctl0_PortalLayoutContent_Main_InfoDialog_InfoDialogGotoLoginPage:active {
  background: #ffffff !important;
  color: #f54242 !important;
  border-color: #f54242 !important;
  text-decoration: none !important;
}

/* Body/Footer-Trenner (subtile Linie) */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-footer {
  border-top: 1px solid #e8ecef !important;
  padding: 16px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Etwas mehr Atemraum: kleiner Margin zwischen Box und Trenner */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-info) .modal-body {
  padding-bottom: 20px !important;
}

/* ___ Ende Teil 19 ____________________________________________________ */


/* ___ Teil 20 - Phase 7b Fehler-Modal Fertigstellung ____________________ */
/* Behebt:
   - Replacement-Text fuer .alert-danger im Modal-Body
     (Teil 17.1 hatte das versehentlich gekillt -> leere rote Box)
   - Header-Akzent rot bei Fehler (Don Norman Color-Code)
   - Modal-Title-Austausch "Passwort vergessen" -> "Anfrage nicht verarbeitet"
   - Personal vs Sachbearbeiter Text-Differenzierung
   - Body/Footer-Trenner + Atemraum (analog Erfolgs-Modal). */

/* 20.1 - Header-Akzent rot bei Fehler */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-danger) .modal-header {
  border-bottom: 4px solid #f54242 !important;
}

/* 20.2 - Modal-Title bei Fehler austauschen */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-danger) .modal-title,
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-danger) .modal-title * {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-danger) .modal-title::after {
  content: "Anfrage nicht verarbeitet" !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* 20.3 - Inner-Knoten der alert-danger unsichtbar (Original-Text + br) */
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-danger * {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* 20.4 - Replacement-Text fuer Fehler-Modal-Body (Personal Default) */
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-danger::before {
  content: "Personalnummer und E-Mail-Adresse stimmen nicht überein oder sind nicht hinterlegt. Bitte prüfen Sie Ihre Eingabe sowie den Bestätigungscode. Falls Ihre E-Mail-Adresse noch nicht hinterlegt ist, wenden Sie sich an die Personalabteilung." !important;
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #27303B !important;
  font-weight: 400 !important;
}

/* 20.5 - Sachbearbeiter-Variante: Bedienerkuerzel statt Personalnummer */
body:has(form[action*="Sachbearbeiter"]) #ctl0_PortalLayoutContent_Main_InfoDialog .modal-body .alert-danger::before {
  content: "Bedienerkürzel und E-Mail-Adresse stimmen nicht überein oder sind nicht hinterlegt. Bitte prüfen Sie Ihre Eingabe sowie den Bestätigungscode. Falls Ihre E-Mail-Adresse noch nicht hinterlegt ist, wenden Sie sich an die Personalabteilung." !important;
}

/* 20.6 - Body/Footer-Trenner fuer Fehler-Modal */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-danger) .modal-footer {
  border-top: 1px solid #e8ecef !important;
  padding: 16px !important;
  display: flex !important;
  justify-content: center !important;
}

/* 20.7 - Body padding-bottom fuer Atemraum (analog Erfolgs-Modal) */
#ctl0_PortalLayoutContent_Main_InfoDialog:has(.modal-body .alert-danger) .modal-body {
  padding-bottom: 20px !important;
}

/* ___ Ende Teil 20 _______________________________________________________ */


/* ___ Teil 21 - Footer Button mittig (Fix Wrapper-DIV-Layout) __________ */
/* Problem: Bootstrap-Grid setzt zwei .col-md-6 Wrapper im Modal-Footer
   (je 50% Breite). Der sichtbare Button sitzt in einem Wrapper, der
   andere Wrapper ist leer aber blockiert 50% Breite -> Button optisch
   ausser Mitte. Loesung: display: contents auf Wrapper -> Buttons
   werden direkte Flex-Kinder des Footers -> justify-content: center
   zentriert sauber. */

#ctl0_PortalLayoutContent_Main_InfoDialog .modal-footer > div {
  display: contents !important;
}

/* Sicherstellen dass Footer als Flex-Container zentriert */
#ctl0_PortalLayoutContent_Main_InfoDialog .modal-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
}

/* ___ Ende Teil 21 _____________________________________________________ */

/* ___ Teil 29 – Switcher unten am Footer verankern (alle Login-Varianten) ___ */
/* Switcher klebt einheitlich nah am Footer, auf Root und allen login=X-Seiten, in jedem Zustand.
   bottom:68px → ~6px Luft (Kante) bis zur ersten Footer-Textzeile; weiter runter berührt den Footer-Text. Am iPhone justiert.
   Footer-Kompaktheit (padding:10px 0) und position:fixed liefert die Footer-Basis; hier nur der
   Bottom-Anker des Switchers plus Body-Reserve für freien Scroll-Abschluss. */
@media (max-width: 767.98px) {
  body.login #menue_links li:has(a[href*="login=Sachbearbeiter"]),
  body.login:has(form[action*="login=Personal"]) #menue_links li:has(a[href*="login=Sachbearbeiter"]),
  body.login:has(form[action*="login=Sachbearbeiter"]) #menue_links li:has(a[href*="login=Personal"]) {
    top: auto !important;
    bottom: 68px !important;
  }
  body.login { padding-bottom: 130px !important; }
}
/* ___ Ende Teil 29 ___ */

/* === Ende Phase 2 ================================================== */